<script setup>
import draggable from "vuedraggable";
import { cloneDeep } from 'lodash'
import { v4 as uuidv4 } from 'uuid'
import CustomzieForm from './components/customizeOption/CustomizeForm.vue'
import CustomizeArea from './components/customizeArea.vue'
import useStore from '@/stores';
import { storeToRefs } from 'pinia'
const { customizeStore } = useStore()
const { formList } = storeToRefs(customizeStore)
import addFormDialog from './components/addFormDialog.vue'
import { componentList } from './components/customizeOption/options/options.js'

// 是否拖拽标识
const dragging = ref(false)


// 克隆item 参数e为被克隆的元素
const cloneItem = (e) => {
  // const newItem = JSON.parse(JSON.stringify(e))
  const newItem = cloneDeep(e)

  newItem.id = uuidv4()
  return newItem
}

// 选中的自定义组件的内容
const CustomizeOptionsItem = ref({})

const selectedComponent = (item) => {

  CustomizeOptionsItem.value = item
  console.log('%c [  ]-88', 'font-size:13px; background:pink; color:#bf2c9f;', CustomizeOptionsItem.value)

  changeDrawerState()
}
const deleteComponent = (item) => {
  if (CustomizeOptionsItem.value?.id === item.id) {
    CustomizeOptionsItem.value = {}
  }
}

//保存组件设置
const saveOptions = (info, option) => {
  console.log('%c [saveOptions  ]-166', 'font-size:13px; background:pink; color:#bf2c9f;', option)
  CustomizeOptionsItem.value = {}
  formList.value = formList.value.map(item => {
    if (item.id === info.id) {
      // 复制并清空原有的attrs
      item.option = option
      item.$attrs = {}
      item.label = option.find(subitem => subitem.nameEn === 'label').value
      item.fieldName = option.find(subitem => subitem.nameEn === 'fieldName').value
      item.required = option.find(subitem => subitem.nameEn === 'required').value

      // 找到对应的组件
      //多选
      if (info.name === 'CustomCheckbox') {
        item.$attrs.labelList = option.find(subitem => subitem.nameEn === 'checkboxName').value
      }
      //单选
      else if (info.name === 'CustomRadio') {
        item.$attrs.labelList = option.find(subitem => subitem.nameEn === 'radioName').value
      }
      //时间选择器 
      else if (info.name === 'CustomDatePicker') {
        item.$attrs.type = option.find(subitem => subitem.nameEn === 'type').value
        item.$attrs.range = option.find(subitem => subitem.nameEn === 'range').value
      }
      //输入框
      else if (info.name === 'CustomInput') {
        item.$attrs.type = option.find(subitem => subitem.nameEn === 'type').value
        item.$attrs.placeholder = option.find(subitem => subitem.nameEn === 'placeholder').value
        item.$attrs.isShowLengthLimit = option.find(subitem => subitem.nameEn === 'LengthLimit').value.isShowLengthLimit
        item.$attrs.max = option.find(subitem => subitem.nameEn === 'LengthLimit').value.max
        item.$attrs.min = option.find(subitem => subitem.nameEn === 'LengthLimit').value.min
        option.find(subitem => subitem.nameEn === 'isShowLength') && (
          item.$attrs.isShowLength = option.find(subitem => subitem.nameEn === 'isShowLength').value
        )
      }
      //选择器
      else if (info.name === 'CustomSelect') {
        item.$attrs.optionsInfo = option.find(subitem => subitem.nameEn === 'optionsInfo').value || [{ label: '1', value: '1' }]
        item.$attrs.placeholder = option.find(subitem => subitem.nameEn === 'placeholder').value
        item.$attrs.isMultiple = option.find(subitem => subitem.nameEn === 'isMultiple').value
      }
      //文件上传
      else if (info.name === 'CustomFile') {
        item.$attrs = {
          limit: option.find(subitem => subitem.nameEn === 'limit').value,
          'list-type': option.find(subitem => subitem.nameEn === 'fileType').value
        }

      }
    }
    return item
  })
  changeDrawerState()

}

//取消组件设置，还原
const cancelOptions = (info) => {
  CustomizeOptionsItem.value = {}
  changeDrawerState()

}

//编辑模块抽屉
const drawer = ref(false)
const changeDrawerState = () => {
  drawer.value = !drawer.value
}

//创建表单弹窗
const addFormDialogVisible = ref(false)

const closeDialog = (flag) => {
  if (flag) {
    const { id, name, key, description, version, lastUpdated, lastUpdatedBy } = flag
    formInfo.value = {
      "reusable": false,
      "newVersion": false,
      "comment": "",
      "formRepresentation": {
        id, name, key, description, version, lastUpdated, lastUpdatedBy,
        'formDefinition': {
          name, key,
          'fields': [],
          "outcomes": []
        }
      },
      "formImageBase64": ''
    }
    console.log('%c [ formInfo.vlaue ]-177', 'font-size:13px; background:pink; color:#bf2c9f;', formInfo.value)
  }
  addFormDialogVisible.value = false
}
//表单数据
const formInfo = ref({})
onMounted(() => {
  addFormDialogVisible.value = true
})

</script>


<template>
  <div class="customize-container">
    <el-row>
      <!-- 自定义组件区域 -->
      <el-col :span="6">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>请选择组件移动到右侧区域</span>
            </div>
          </template>
          <!-- 组件区域 -->
          <draggable :list="componentList" item-key="id" class="list-group" ghost-class="ghost" @start="dragging = true"
            @end="dragging = false" :group="{ name: 'form', pull: 'clone', put: false }" :sort="false"
            :clone="cloneItem" animation="300">
            <template #item="{ element }">
              <el-card shadow="always">{{ element.label }}</el-card>
            </template>
          </draggable>

          <template #footer>
            <div class="card-footer">
              <span>
                需要更多表单选项，请联系开发人员。
              </span>
            </div>
          </template>
        </el-card>
      </el-col>
      <!-- 自定义表单区域 -->

      <el-col :span="16" :push="1">
        <CustomizeArea :formInfo="formInfo" @selectedComponent="selectedComponent" @deleteComponent="deleteComponent" />
      </el-col>
    </el-row>
    <!-- 组件定义区域 -->
    <el-drawer v-model="drawer" title="编辑组件" direction="ltr" :close-on-click-modal="false"
      :close-on-press-escape="false" :destroy-on-close="true" :show-close="false">
      <CustomzieForm :info="CustomizeOptionsItem" @saveOptions="saveOptions" @cancelOptions="cancelOptions">
      </CustomzieForm>
    </el-drawer>
  </div>
  <!-- 创建表单弹窗 -->
  <addFormDialog :visible="addFormDialogVisible" @closeDialog="closeDialog"></addFormDialog>
</template>

<style lang="scss" scoped>
.customize-container {
  height: 100%;

  .list-group {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
  }
}

:deep(.el-row) {
  height: 100%;
  display: flex;
}

.card-footer {
  color: #8e8e8e;
  font-weight: 700;
  font-style: italic;
  font-size: 14px;
  text-align: center;
}

:deep(.el-card:has(.list-group)) {
  width: 100%;
  height: 100%;
  margin-bottom: 5px;
  display: flex;
  flex-direction: column;

  .el-card__header {
    color: #8e8e8e;
    font-weight: 700;
  }

  .el-card__body {
    padding: 10px 20px 20px;
    flex: 1;
  }

  .el-card__footer {
    border: 0;
  }
}

:deep(.el-card) {
  transition: all 0.3s;
}

:deep(.el-card:not(:has(.list-group, .el-button))) {

  // border: 0;
  width: 48%;
  border-radius: 15px;
  box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.12), 0 0 0px 0 #fff inset;

  &:hover {
    color: #737373;
    box-shadow: 0px 0px 0px #fff, 4px 4px 8px 0 rgba(0, 0, 0, 0.12) inset;
    cursor: pointer;
  }

  .el-card__body {
    padding: 5px 10px;
    text-align: center;

  }

}

:deep(.el-drawer__body) {
  padding: 0;
}

.ghost {
  opacity: 0.5;
}

.list-group {
  width: 100%;

  .list-group-item {
    width: 80%;
  }
}
</style>